<template>
	<view class="container">
		<u-navbar :is-back="true" :border-bottom="false" :is-fixed="true">
		</u-navbar>
		<view style="text-align: center;">
			<image style="width: 200rpx;height: 200upx;margin-top: 40rpx;border-radius:50%"
				src="https://img.koalalf.com/lihuanapp/logo.png"></image>
			<view style="font-size: 28rpx;margin-top: 20rpx;  font-weight: bold;">格物云商</view>
			<u-button @click="weixinLo" shape="circle" :custom-style="customStyle" open-type="getUserInfo"
				@tap="getUserProfile">微信登录</u-button>
			<view style="margin-top: 32rpx;text-align: center"><text style="color: #999999;font-size: 26rpx;"
					@click="register()">手机登录 ></text></view>
			<!-- 底部信息 -->
			<view class="footer">
				<text>登录即代表同意</text>
				<!-- 协议地址 -->
				<navigator url="/pages/auth/mimi" open-type="navigate" style="color: #962a22;">《隐私政策》</navigator>
				和
				<navigator url="/pages/auth/xieyi" open-type="navigate" style="color: #962a22;">《用户服务协议》</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				taobao: false,
				weixinLogin: false,
				sending: false,
				sendTime: '获取验证码',
				count: 60,
				customStyle: {
					'backgroundImage': 'linear-gradient(90deg, #EB142C 100%, #F2365A 100%)',
					'color': '#fff',
					'margin': '100rpx',
					'margin-bottom': '0',
					'margin-top': '200rpx',
				},
				token: null
			};
		},
		onLoad() {
			this.weixinLogin = true;
			uni.setStorageSync('pageNum', 1);

			let that = this;
			// uni.checkSession({
			// 	success() {

			// 	},fail() {
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.$u.api.wechatLogin({
						code: loginRes.code,
						share_key: uni.getStorageSync('share_key')
					}).then(res => {
						that.token = res.token
						uni.setStorageSync('session_key', res.session_key)
					})
				}
			});
			// 	}
			// })

		},
		methods: {
			weixinLo() {
				let that = this;
				uni.getUserProfile({
					desc: '完善资料',
					provider: 'weixin',
					success: function(infoRes) {
						that.$u.api.wechatInfoSave({
							token: that.token,
							nick_name: infoRes.userInfo.nickName,
							avatar: infoRes.userInfo.avatarUrl
						}).then(res => {
							uni.setStorageSync('token', that.token)
							if (res.confirm_flag === 1) {
								that.$u.route({
									url: '/pages/auth/bindMobile'
								})
							} else {
								
								that.$u.route({
									type: 'navigateBack'
								})

								uni.$emit('updateUserInfo', {
									msg: '刷新用户信息'
								})
							}

						})
					}
				});
			},


			register() {
				uni.navigateTo({
					url: '/pages/auth/mobileLogin'
				});
			},

		}
	};
</script>

<style lang="scss">
	.footer {
		padding-left: 140upx;
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
	}

	page {
		background: #fff;
	}

	.send-msg {
		border-radius: 30px;
		color: black;
		background: white;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
	}

	.container {
		top: 0;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 20px;
	}

	.back-btn {
		position: absolute;
		left: 20px;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 20px;
		font-size: 20px;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 80px;
		color: $page-color-base;
		position: relative;
	}

	.right-top-sign {
		position: absolute;
		top: 40px;
		right: -15px;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: '';
			width: 20px;
			height: 40px;
			background: #e10a07;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198px;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270px;
		bottom: -320px;
		/*border: 100upx solid #d0d1fd;*/
		border-radius: 50%;
		padding: 90px;
	}

	.welcome {
		position: relative;
		left: 30px;
		top: -55px;
		font-size: 28px;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}

	.input-content {
		padding: 0 20px;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30px;
		background: $page-color-light;
		height: 64px;
		border-radius: 4px;
		margin-bottom: 30px;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 30px;
			line-height: 28px;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 40px;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	.confirm-btn-weixin {
		width: 200px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 40upx;
		background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
		background: -webkit-gradient(linear, left top, left right, color-stop(0, #f15b6c), color-stop(100%, #e10a07));
		background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 60px;
		}
	}

	.confirm-btn {
		width: 200px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 300upx;
		background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
		background: -webkit-gradient(linear, left top, left right, color-stop(0, #f15b6c), color-stop(100%, #e10a07));
		background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 60px;
		}
	}

	.confirm-btn1 {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 40px;
		background: whitesmoke;
		color: grey;
		font-size: $font-lg;

		&:after {
			border-radius: 60px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40px;
	}

	.register-section {
		left: 0;
		margin-top: 30px;
		bottom: 30px;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10px;
		}
	}
</style>
